<template>
    <el-row style="margin-top: 20px;">
        <el-col :span="11">
             <el-tree
                    style="max-width: 300px;margin-top: 20px;"
                    :data="data1"
                    node-key="value"
                    :props="props"
                    show-checkbox
                    
                    default-expand-all="true"
                    @check-change="handleCheckChange"
                />
                <!-- @check-change="handleCheckChange" show-checkbox  -->
            <!-- <el-tree ref="treeRef" style="max-width: 600px" :props="props" default-expand-all :data="data1"
                show-checkbox node-key="value" @check-change="handleCheckChange" :default-checked-keys="tableMenu" /> -->
        </el-col>
        <el-col :span="7">
            <br/>
            <el-select v-model="tableForm.roleId" placeholder="请选择角色" clearable @change="GetFanMenu">
                <el-option v-for="item in GetRoletable" :label="item.name" :value="item.id" />
            </el-select>
            <!-- <el-tree
                    style="max-width: 200px;margin-top: 20px;margin-left: 50px;"
                    :data="Menu"
                    :props="defaultProps"
                    default-expand-all="true"
                    @check-change="handleNodeClick1"
                    node-key="value"
                    check-strictly="false"
                    :default-checked-keys="Menus"
                    show-checkbox
                /> -->
        </el-col>
    </el-row>
    <el-button type="primary" @click="AddRoleMune">添加</el-button>
    <el-button type="success" @click="UpdateRoleMune">修改</el-button>
    
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../http.js'
onMounted(() => {
    GetRole();
    GetMenu();
})
const tableForm = reactive({
    roleId: "",
    menuId: []
})
//显示角色
const GetRoletable = ref([]);
const GetRole = () => {
    axios({
        method: "get",
        url: http.RBACdu+"/api/Role/RoleSelectShow"
    })
        .then(res => {
            GetRoletable.value = res.data.data
        })
}

const props = {
    label: 'label',
    children: 'children',
    id: 'value'
}
const handleCheckChange = (data: any, check: any) => {
    if (check) {
        tableForm.menuId.push(data.value);
        // tableForm.menuId = tableForm.menuId.filter((item) => item.menuId != undefined)
        // console.log(tableForm.menuId)
        // console.log(tableForm.menuId)
    }
    else {
        tableForm.menuId = tableForm.menuId.filter(x => x !== data.value)
    }

}
//显示树形菜单
const GetNenuTable = ref([])
const GetMenu = () => {
    axios({
        method: "get",
        url: http.RBACdu+"/api/Menu/MenuTreeShow"
    })
        .then(res => {
            GetNenuTable.value = res.data.data
            // console.log(GetNenuTable.value)
        })
}
const data1 = [
    {
        label: '权限菜单',
        children: GetNenuTable,
    }
]
//角色菜单功能添加
const AddRoleMune = () => {
    console.log(tableForm)
    // console.log(tableForm.menuId)
    //跳过第一条数据
    tableForm.menuId.shift()

    console.log(tableForm.menuId)
    axios({
        method: "post",
        url: http.RBACxie+"/api/Menu/RoleMenu",
        data: tableForm
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success("添加成功")
            }
            else{
                ElMessage.error(res.data.message)
                return
            }
        })
}
//根据角色id查看菜单详情
const tableMenu = ref([]);
const GetFanMenu = () => {
    // console.log(tableForm.roleId)
    axios({
        method: "get",
        url: http.RBACdu+"/api/RoleMenuFun/RoleMenuFunByRoleId",
        params: {
            roleId: tableForm.roleId
        }
    })
        .then(res => {
            tableMenu.value = res.data.data
            // console.log(res.data.data)
        })
}
//角色菜单功能修改
const UpdateRoleMune = () => {
    console.log(tableForm)
    axios({
        method: "put",
        url: http.RBACxie+"/api/Menu/RoleMenuUpdate",
        data: tableForm
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success("权限已更改")
            }
            else {
                ElMessage.error("权限修改失败")
            }
        })
}

</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>